import React, { useState } from 'react';
import { Card, Table, Tag, Button, Space, Breadcrumb, Progress, message } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { HomeOutlined } from '@ant-design/icons';
import { Link, useNavigate } from 'react-router-dom';
import MainLayout from '../../components/MainLayout';
import styles from './Reform.module.less';

type ProjectStatus = 'pending' | 'processing' | 'completed' | 'rejected';
type EvaluationResult = 'qualified' | 'unqualified';

interface ProjectItem {
  id: string;
  name: string;
  code: string;
  status: ProjectStatus;
  totalIssues: number;
  resolvedIssues: number;
  startTime: string;
  endTime?: string;
  manager: string;
  evaluation?: EvaluationResult;
}

const statusMap = {
  pending: { text: '待确认', color: 'orange' },
  processing: { text: '确认中', color: 'blue' },
  completed: { text: '已完成', color: 'green' },
  rejected: { text: '已驳回', color: 'red' }
} as const;

const Reform: React.FC = () => {
  const navigate = useNavigate();
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const handleExport = () => {
    if (selectedRowKeys.length === 0) {
      message.warning('请选择要导出的项目');
      return;
    }
    message.success(`正在导出 ${selectedRowKeys.length} 个项目的整改确认清单...`);
    // TODO: 实现导出Excel功能
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: (keys: React.Key[]) => setSelectedRowKeys(keys),
  };

  const columns: ColumnsType<ProjectItem> = [
    {
      title: '项目名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '项目编号',
      dataIndex: 'code',
      key: 'code',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: ProjectStatus) => {
        const { text, color } = statusMap[status];
        return <Tag color={color}>{text}</Tag>;
      },
    },
    {
      title: '整改进度',
      key: 'progress',
      render: (_, record) => {
        const percent = Math.round((record.resolvedIssues / record.totalIssues) * 100);
        return (
          <Space>
            <Progress percent={percent} size="small" width={80} />
            <span>{record.resolvedIssues}/{record.totalIssues}</span>
          </Space>
        );
      },
    },
    {
      title: '开始时间',
      dataIndex: 'startTime',
      key: 'startTime',
    },
    {
      title: '完成时间',
      dataIndex: 'endTime',
      key: 'endTime',
    },
    {
      title: '项目负责人',
      dataIndex: 'manager',
      key: 'manager',
    },
    {
      title: '整改评价',
      dataIndex: 'evaluation',
      key: 'evaluation',
      render: (evaluation: EvaluationResult) => {
        const config = {
          qualified: { text: '合格', color: 'success' },
          unqualified: { text: '不合格', color: 'error' }
        };
        
        return evaluation ? (
          <Tag color={config[evaluation].color}>
            {config[evaluation].text}
          </Tag>
        ) : '-';
      },
    },
    {
      title: '操作',
      key: 'action',
      render: (_: unknown, record: any) => (
        <Button 
          type="link" 
          onClick={() => navigate(`/summary/reform/detail/${record.id}`)}
        >
          查看详情
        </Button>
      ),
    },
  ];

  const data: ProjectItem[] = [
    {
      id: '1',
      name: '示范区档案管理项目',
      code: 'PRJ001',
      status: 'completed',
      totalIssues: 10,
      resolvedIssues: 10,
      startTime: '2024-03-15',
      endTime: '2024-03-20',
      manager: '张三',
      evaluation: 'qualified'
    },
    {
      id: '2',
      name: '数字档案馆建设项目',
      code: 'PRJ002',
      status: 'processing',
      totalIssues: 8,
      resolvedIssues: 6,
      startTime: '2024-03-18',
      manager: '李四'
    },
    {
      id: '3',
      name: '档案信息化升级项目',
      code: 'PRJ003',
      status: 'rejected',
      totalIssues: 12,
      resolvedIssues: 4,
      startTime: '2024-03-21',
      manager: '王五',
      evaluation: 'unqualified'
    }
  ];

  return (
    <MainLayout>
      <div className={styles.breadcrumb}>
        <Breadcrumb items={[
          {
            title: <Link to="/home"><HomeOutlined /> 首页</Link>,
          },
          {
            title: '总结备案',
          },
          {
            title: '整改确认',
          }
        ]} />
      </div>

      <Card 
        title="整改确认" 
        className={styles.reformCard}
        extra={
          <Button 
            type="primary"
            onClick={handleExport}
          >
            导出清单 {selectedRowKeys.length > 0 && `(${selectedRowKeys.length})`}
          </Button>
        }
      >
        <Table
          rowSelection={rowSelection}
          columns={columns}
          dataSource={data}
          rowKey="id"
          pagination={{
            pageSize: 10,
            showTotal: total => `共 ${total} 条`
          }}
        />
      </Card>
    </MainLayout>
  );
};

export default Reform; 